<template>
	<view class="container">
		<!--头部start-->
		<!--<view class="header">
			<u-status-bar></u-status-bar>
			<view class="index_header">
				<text>概览</text>
				<text>团队动态</text>
				<text class="on">公告</text>
			</view>
		</view>
		<u-status-bar></u-status-bar>-->
		<!--头部end-->
		
		<!--公告start-->
		<view class="news">
			<me-tabs v-model="tabIndex" :tabs="tabs" :height="tab_height"></me-tabs>
			<swiper :style="{height: height}" :current="tabIndex" @change="swiperChange">
				<swiper-item v-for="(tab,i) in tabs" :key="i">
					<mescroll-item ref="mescrollItem" :i="i" :index="tabIndex" :tabs="tabs" :height="height" :api_url="api_url" v-if="canInit"></mescroll-item>
				</swiper-item>
			</swiper>
		</view>
		<!--公告end-->
		
		<!--底部start-->
		<!--<u-safe-bottom></u-safe-bottom>
		<view class="footer">
			<view class="list">
				<view class="icon icon01 active"></view>
				<view class="icon icon02"></view>
				<view class="icon icon05"></view>
				<view class="icon icon03"></view>
				<view class="icon icon04"></view>
			</view>
			<u-safe-bottom customStyle="background: #fff"></u-safe-bottom>
		</view>-->
		<!--底部end-->
		
	</view>
</template>

<script>
//加载列表数据循环元素体文件：mescroll-swiper
import MescrollItem from "./news/item.vue";

export default {
    components: {
        /***** mescroll S *****/
        //注册组件
        MescrollItem
        /***** mescroll E *****/
    },
	props:{ 
		height:{ 
		//参数名
		type:String, //参数名
		default: '100' ,//参数默认
		}
	},
    data() {
        return {
            /***** mescroll S *****/
			//定义tab的高度
			tab_height: 90,
            //指定tab头的api路径
            tabs_api_url: '',//'demo/swiper_tab',
            //设置列表api路径
            api_url : 'demo/swiper',
            //tab头选项（如设置了this.tabs_api_url则this.tabs为空数组即可）
			tabs:[{tabId:'t1',name:'全部'},{tabId:'t2',name:'最新'},{tabId:'t3',name:'最热'},{tabId:'t4',name:'我的收藏'}],
			//默认tab的current下标（0，1，2，3...）
            tabIndex: 0,
		    //需要固定swiper的高度
			//height: "",
            //是否可以可初始化（可以用来延时初始化，用于达到某条件时机时才触发初始化mescroll）
            canInit: true,
            /***** mescroll E *****/
        }
    },
    onLoad(option) {
        var that=this;
        /***** mescroll S *****/
        //需要固定swiper的高度 (需减去悬浮tabs的高度)
        //this.height = uni.getSystemInfoSync().windowHeight - uni.upx2px(this.tab_height) - uni.upx2px(105)  + 'px';
        //api获取tab数据
        if(this.tabs_api_url!='') {
            this.ajax({ url: this.tabs_api_url }).then(res => {
                this.tabs = res.data;
            });
        }
        //如果带有$_GET[tabindex]参数，则指向相应的tab的current
        if(typeof(option.tabindex)!='undefined' && option.tabindex)
            this.tabIndex = option.tabindex;
        //供其他页面使用的刷新事件监听：刷新当前TAB【在其他页面调用刷新的方法：uni.$emit('refreshTabs');】
        uni.$on('refreshTabs',function(){
            that.$refs.mescrollItem[that.tabIndex].refreshTab();//特别注意：这里需要指定tabindex的值；以及这里不能用this
        });
        /***** mescroll E *****/
    },
    methods: {
        /***** mescroll S *****/
        /**
         * 当用户操作滑动内容时，更新tab头的current值
         */
        swiperChange(e) {
            this.tabIndex = e.detail.current
        }
        /***** mescroll E *****/
    }
}
</script>

<style lang="scss">
	@import url("../../common/style.scss");
	@import url("news.scss");
	
	.container  .me-tabs{
		background-color: #EEEEEF;
		padding: 0 25rpx;
		display: -webkit-flex;
		display: flex;
		align-items: center;
		.tabs-item{
			padding-bottom: 0;
		}
		
		.tabs-flex .tab-item{
			flex: inherit;
			margin-right: 7rpx;
			padding: 0 30rpx;
			font-size: 28rpx;
			color: #5F5D5D;
			height: 60rpx !important;
			line-height: 60rpx !important;
		}
		.tab-item.active{
			background-color: #474443;
			color: #FEFEFE !important;
			border-radius: 30rpx;
			font-weight: normal;
		}
		.tabs-line{
			display: none;
		}
	}

	
	
</style>